export default {
    data() {
        return {
            activeId: 0,
            skipCount: 0,
            currentMenuIndex: 0,
            page: {maxResultCount: 3},
        }
    },
    computed: {
        currentPageMenus() {
            const start = this.skipCount;
            const end = this.skipCount + this.page.maxResultCount;
            return this.menus.slice(start, end);
        },
        currentMenu() {
            return this.currentPageMenus[this.currentMenuIndex];
        }
    },
    watch: {
        currentMenuIndex(newVal, oldVal) {
            if (newVal == -1) {
                this.currentMenuIndex = this.currentPageMenus.length - 1;
            }
        },
        activeId(newVal, oldVal) {
            this.activeIdChange(newVal, oldVal)
        }
    },
    methods: {
        activeIdChange(newVal, oldVal) {

            if (oldVal >= this.menus.length) return;  // 不可能发生的返回
            if (oldVal <= -1) return;  // 不可能发生的返回

            var vm = this;

            // 判断当前指向的是不是菜单的最后一项
            function isMenuTail() {
                return oldVal + 1 == vm.menus.length
            }

            // 判断当前指向的是不是显示页码中的最后一项
            function isCurrentPageMenuTail() {
                return vm.currentMenuIndex + 1 == vm.currentPageMenus.length;
            }

            // 判断当前指向的是不是菜单的第一项
            function isMenuHead() {
                return oldVal == 0;
            }

            // 判断当前指向的是不是显示页面中菜单的第一项
            function isCurrentPageMenuHead() {
                return vm.currentMenuIndex == 0;
            }


            if (newVal > oldVal) {
                // 向下按执行代码块

                const _isMenuTail = isMenuTail();
                const _isCurrentPageMenuTail = isCurrentPageMenuTail();

                if (_isMenuTail) {
                    this.skipCount = 0;
                    this.activeId = 0;
                    this.currentMenuIndex = 0;
                } else if (_isCurrentPageMenuTail) {
                    this.skipCount++;
                } else {
                    this.currentMenuIndex++;
                }

            } else {

                // 向上按
                const _isMenuHead = isMenuHead();
                const _isCurrentPageMenuHead = isCurrentPageMenuHead();

                if (_isMenuHead) {
                    this.skipCount = this.menus.length - 3;
                    this.activeId = this.menus.length - 1;
                    this.currentMenuIndex = 2;
                } else if (_isCurrentPageMenuHead) {
                    this.skipCount--;
                } else {
                    this.currentMenuIndex--;
                }

            }
        },
    },
    mounted() {
        const index = parseInt(this.$route.query.index) || 0;
        this.activeId = index;
        for (let i = 0; i < index; i++) {
            this.activeIdChange(i, i - 1);
        }
    }
}
